<template> 
    <div>
        <RadioGroup v-model="confintype">
            <Radio label="month">按月份筛选</Radio>
            <Radio label="semester">按学期筛选</Radio>
        </RadioGroup>

        <div v-show="confintype=='month'">
            <div style="margin:5px">
                <DatePicker v-model="sss" type="month" size="small" placeholder="请选择日期" @on-change="searchfun"></DatePicker>
            </div>
        </div>
        <div v-show="confintype=='semester'">
            <div style="margin:5px">
                <Select style="width:90%;" v-model="condition.semester_id" size="small" placeholder="请选择学期">
                    <Option v-for="(item,index) in semesterList" :value="item.semester_id" :key="index">{{ item.semester_name.zh?item.semester_name.zh:item.semester_name.mn }}</Option>
                </Select>
            </div>
        </div>
        <br/>    
        <Button type="primary" @click="queryData" long>确认</Button>
    </div>
</template>

<script>   
    export default {
        data () {
            return {
                sss:new Date(),
                // 列表接口请求携带参数
                condition:{
                    month:null,
                    semester_id:null,
                },
                confintype:'month',
                semesterList:[],
            }
        },
        methods: {
            /************************************************************
             * 
             * 加载学期
             * 
             ************************************************************/
            semesterData() {
                this.$http.get('api/semester/v1/semester/semesterlists').then(val=>{  
                    this.semesterList=val.data                
                }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            },

            /************************************************************
             * 
             * 日期搜索
             * 
             ************************************************************/
            searchfun(val){
                this.condition.month=val
            },

            /************************************************************
             * 
             * 点击确认
             * 
             ************************************************************/
            queryData(){
                if(this.confintype=='month'){
                    if(!this.condition.month){
                        this.searchfun(new Date().toISOString().substr(0, 7)) 
                    }
                    // this.condition.semester_id=null
                }
                // if(this.confintype=='semester'){
                //     this.condition.month=null
                // }
                this.$emit('on-condition',this.confintype,this.condition);
            },

            
        },
        mounted(){
            this.$http.get('api/semester/v1/semester/now_semester').then(val=>{
                this.condition.semester_id=val.data[1].semester_id
            })
            this.semesterData()//学年学期
        },

    }
</script>